<template>
    <div>
        <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
        <div class="tip">规则信息修改</div>

        <el-form ref="form" :model="ruleForm" label-width="80px">
            <el-form-item label="规则名称" required>
                <el-input v-model="ruleForm.rulesName"></el-input>
            </el-form-item>
            <el-form-item label="规则描述">
                <el-input v-model="ruleForm.rulesDescription"></el-input>
            </el-form-item>
            <el-form-item label="客户群聊" required>
                <div style="height: 80px">
                    <el-button type="primary" @click="selectMemberVisible = true">+ 添加群聊</el-button><br/>
                    <el-tag v-for="tag in this.ruleForm.underScrutinyEn" :key="tag.clientGroupId" closable @close="closeTagHandle(tag)"
                            style="margin-right: 10px"> {{ tag.clientGroupName }}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="触发条件" required>
                <template>
                    <div style="background-color: #f8f9fa">
                        <div style="height: 81px;margin-left: 10px">
                            <el-checkbox v-model="ruleForm.isGroupManager">通知群主</el-checkbox>
                            <br/>
                            <span v-show="ruleForm.isGroupManager">
                                超过
                                <el-input-number v-model="ruleForm.rulesTrigger" size="mini" :min="0" :max="max1"></el-input-number>
                                <el-select v-model="ruleForm.rulesTimeType" @change="setMax(1)" size="mini" style="width: 60px">
                                    <el-option v-for="item in timeType1" :key="item" :label="item" :value="item"></el-option>
                                </el-select>
                                未回复客户的群聊，提醒群主
                            </span>
                        </div>
                        <div style="height: 81px;margin-left: 10px">
                            <el-checkbox v-model="ruleForm.isLeadership">通知领导</el-checkbox>
                            <br/>
                            <span v-show="ruleForm.isLeadership">
                                超过
                                <el-input-number v-model="ruleForm.leadershipTrigger" size="mini" :min="0" :max="max2"></el-input-number>
                                <el-select v-model="ruleForm.leadershipTimeType" @change="setMax(2)" size="mini" style="width: 60px">
                                    <el-option v-for="item in timeType2" :key="item" :label="item" :value="item"></el-option>
                                </el-select>
                                未回复客户的群聊，提醒领导
                            </span>
                        </div>
                    </div>
                    <span style="color: #b1adad"><i class="el-icon-warning-outline"> 该功能通知可能会有10分钟左右的延迟</i></span>
                </template>
            </el-form-item>
        </el-form>

        <div class="button-strip">
            <el-button type="primary" @click="submit">设置</el-button>
            <el-divider direction="vertical" content-position="center"></el-divider>
            <el-button plain @click="back">返回</el-button>
        </div>

        <el-dialog title="选择群聊" :visible.sync="selectMemberVisible" width="60%" :close-on-click-modal="false"
                   :destroy-on-close="true">
            <List_multiple_select ref="selectMember" :listFields="listFields" :dataSource="memberList" type="filter"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectMemberVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitMember">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import List_multiple_select from "@/components/list_multiple_select/list_multiple_select";

    export default {
        name: "inspection_edit",
        components: {List_multiple_select},
        props: {
            rulesId: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                selectMemberVisible: false,
                ruleForm: {},
                memberList: [],
                listFields: {
                    clientGroupName: '名称'
                },
                max1: 60,
                max2: 60,
                timeType1:['分','时','天'],
                timeType2:['分','时','天'],

                parent: {
                    currentPanel: 'list',
                    data: {}
                },
            }
        },
        mounted() {
            this.initData()
        },
        methods: {
            initData(){
                let that = this
                this.$request('/api/custGroup/selectGroup/1_0','', 'POST').then((data) => {
                    that.memberList = data.rows
                })
                this.$request('/api/groupInspection/getById/1_0?id=' + this.rulesId,'', 'GET').then((data) => {
                    that.ruleForm = data.data
                })
            },
            back() {
                this.$emit("currentHandle", {'currentPanel': 'list'}, 'back')
            },
            submit() {
                this.parent.data = this.ruleForm
                //选中的群id ====================
                let groupIds = []
                for (let group of this.ruleForm.underScrutinyEn){
                    groupIds.push(group['clientGroupId'])
                }
                this.parent.data.underScrutinyId = groupIds.toString()
                //选中的群id ====================
                this.parent.data.founder = this.$t.data.userInfo.empId
                this.$emit("currentHandle", this.parent)
            },
            closeTagHandle(tag) {
                this.ruleForm.underScrutinyEn.splice(this.ruleForm.underScrutinyEn.indexOf(tag), 1);
            },
            submitMember() {
                let data = this.$refs.selectMember.getData();
                this.ruleForm.underScrutinyEn = data
                this.selectMemberVisible = false
            },
            setMax(type){
                if (type === 1){
                    this.ruleForm.rulesTrigger = 0
                    if (this.ruleForm.rulesTimeType == '分'){
                        this.max1 = 60
                    }else if (this.ruleForm.rulesTimeType == '时'){
                        this.max1 = 24
                    }else if (this.ruleForm.rulesTimeType == '天'){
                        this.max1 = 30
                    }
                }else if (type === 2){
                    this.ruleForm.leadershipTrigger = 0
                    if (this.ruleForm.leadershipTimeType == '分'){
                        this.max2 = 60
                    }else if (this.ruleForm.leadershipTimeType == '时'){
                        this.max2 = 24
                    }else if (this.ruleForm.leadershipTimeType == '天'){
                        this.max2 = 30
                    }
                }
            },
        }
    }
</script>

<style scoped>
    .el-divider--vertical {
        height: 2em;
    }
</style>
